<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="12" class="card-box" v-if="role == '管理员'">
        <el-card>
          <div slot="header"><span>随访任务进度</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="followSchedule" style="height: 400px" />
          </div>
          <div class="followSchedule-box">
            <ul class="followSchedule-content">
              <li style="margin-left: 0;">
                <div></div>
                <span class="spa2">已完成比例</span>
                <span class="spa2">已完成数量</span>
              </li>
              <li v-for="(item, index) in followScheduleData" :key="index">
                <div>
                  <em :style="{background: colorItem(index)}"></em>
                  <span class="spa1">{{item.name}}</span>
                </div>
                <span class="spa2">{{percentCalc(item.name, 1)}}</span>
                <span class="spa2">{{item.value}}</span>
              </li>
            </ul>
          </div>
          <span class="spa3">*已完成比例=各社区已完成数/全国应完成总数</span>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box" v-if="role == '医生'">
        <el-card>
          <div slot="header"><span>随访任务进度</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="doctorSchedule" style="height: 500px" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header" class="title-content">
            <span>日工作量完成统计</span>
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :pickerOptions="pickerOptions">
            </el-date-picker>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <div ref="workSchedule" :style="{height: role == '管理员' ? '587px' : '500px'}" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box" v-if="role == '管理员'">
        <el-card>
          <div slot="header"><span>数据明细统计</span></div>
          <el-table
            v-loading="loading"
            :data="dataList"
            row-key="id"
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            style="margin-top: 28px;width: 100%;"
          >
            <el-table-column
              prop="name"
              label="社区"
              width="240">
            </el-table-column>
            <el-table-column
              label="量表完成量/项目需求量"
              align="center">
              <template slot-scope="scope"><span style="color: #FF0000;">{{ scope.row.num1 }}</span>/{{ scope.row.num2 }}</template>
            </el-table-column>
            <el-table-column
              prop="per"
              label="完成度"
              width="200"
              align="center">
            </el-table-column>
            <el-table-column
              prop="num3"
              label="用药上传量"
              width="200"
              align="center">
            </el-table-column>
            <el-table-column
              prop="num4"
              label="家庭环境上传量"
              width="200"
              align="center">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Index",
  data() {
    return {
      followSchedule: null,
      doctorSchedule: null,
      followScheduleData: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' },
        { value: 484, name: 'Union Ads2' },
        { value: 300, name: 'Video Ads2' },
        { value: 1048, name: 'Search Engine2' },
        { value: 735, name: 'Direct2' },
        { value: 580, name: 'Email2' }
      ],
      doctorScheduleData: [
        { value: 1048, name: '已完成' },
        { value: 735, name: '未完成' }
      ],
      followScheduleColorList: ['#FFC908', '#975FE4', '#3AA0FF', '#F2637B','#4DCB73','#5470c6', '#bceda5', '#f1d085', ' #eb8888', '#73c0de'],
      role: '管理员',
      dateRange: '',
      workSchedule: null,
      choiceDate: null,
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          // 把选择的第一个日期赋值给一个变量。
          this.choiceDate = minDate.getTime();
          // 如何你选择了两个日期了，就把那个变量置空
          if (maxDate) this.choiceDate = "";
        },
        disabledDate: (time) => {
          // 如何选择了一个日期
          if (this.choiceDate) {
            // 7天的时间戳
            const one = 6 * 24 * 3600 * 1000;
            // 当前日期 - one = 7天之前
            const minTime = this.choiceDate - one;
            // 当前日期 + one = 7天之后
            const maxTime = this.choiceDate + one;
            return (
              time.getTime() < minTime ||
              time.getTime() > maxTime
              // 限制不能选择今天及以后
              // || time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
            );
          } else {
            // 如果没有选择日期，就要限制不能选择今天及以后
            // return time.getTime() + 1 * 24 * 3600 * 1000 > Date.now();
          }
        },
      },
      loading: false,
      dataList: [{
        id: 1,
        name: '社区1',
        num1: '123',
        num2: '1234',
        num3: '12345',
        num4: '123456',
        per: '50%'
      }, {
        id: 2,
        name: '社区2',
        num1: '123',
        num2: '1234',
        num3: '12345',
        num4: '123456',
        per: '50%'
      }, {
        id: 3,
        name: '社区3',
        num1: '123',
        num2: '1234',
        num3: '12345',
        num4: '123456',
        per: '50%',
        children: [{
            id: 31,
            name: '医生1',
            num1: '123',
            num2: '1234',
            num3: '12345',
            num4: '123456',
            per: '50%',
            children: [{
              id: 32,
              name: '患者1',
              num1: '123',
              num2: '1234',
              num3: '12345',
              num4: '123456',
              per: '50%'
            }]
          }, {
            id: 32,
            name: '医生2',
            num1: '123',
            num2: '1234',
            num3: '12345',
            num4: '123456',
            per: '50%'
        }]
      }, {
        id: 4,
        name: '社区4',
        num1: '123',
        num2: '1234',
        num3: '12345',
        num4: '123456',
        per: '50%'
      }],
    }
  },
  mounted() {
    if(this.role == '管理员') {
      this.getAdminChartList()
    }else {
      this.getDoctorChartList()
    }
    this.getWorkChartList()
  },
  methods: {
    /** 数据明细统计列表 */
    getList() {
      this.loading = true;
      // listDept({}).then(response => {
      //   this.dataList = response.data;
      //   this.loading = false;
      // });
    },
    // 颜色遍历
    colorItem(index) {
      console.log(index)
      var colorItem = this.followScheduleColorList;
      var colorList=[];
      for(var i=0;i<this.followScheduleData.length;i++){
          colorList.push(colorItem[i%10]);
      }
      return colorList[index]
    },
    percentCalc(name, type) {
      let total = 0
      let tarValue, arr
      if(type == 1) { //管理员
        arr = this.followScheduleData
      }else { //医生
        arr = this.doctorScheduleData
      }
      for (let i = 0; i < arr.length; i++) {
        total += arr[i].value
        if (arr[i].name == name) {
        tarValue = arr[i].value
        }
      }
      //计算出百分比
      let p = Math.round((tarValue / total) * 100) + '%'
      if(type == 1) {
        return `${p}`
      }else {
        return `${name}  ${p}   ${tarValue}`
      }
    },
    // 管理员随访任务进度
    getAdminChartList() {
      let that = this
      this.followSchedule = echarts.init(this.$refs.followSchedule, "macarons")
      this.followSchedule.setOption({
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            label: {
              formatter: "{b}({d}%)"
            },
            data: this.followScheduleData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            itemStyle: {
              color:function(params) {
                return that.colorItem(params.dataIndex)
              }
            },
          }
        ]
      })
      window.addEventListener("resize",()=>{
        this.followSchedule.resize()
      });
    },
    // 医生随访任务进度
    getDoctorChartList() {
      let that = this
      this.doctorSchedule = echarts.init(this.$refs.doctorSchedule, "macarons")
      this.doctorSchedule.setOption({
        tooltip: {
          trigger: 'item'
        },
        legend: {
          x:'center',
          y:'bottom',
          padding:[0,0,30,0],
          itemWidth: 10,  // 设置宽度
          itemHeight: 10, // 设置高度
          icon: "circle",
          itemGap: 100 ,// 设置间距，
          formatter: function (name) {
            console.log(name)
            return that.percentCalc(name, 2)
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = ["#1990FF", "#E4E5EA"]
                  return colorList[colors.dataIndex];
                }
              }
            },
            radius: '50%',
            label: {
              formatter: "{b}({d}%)"
            },
            data: this.doctorScheduleData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
      window.addEventListener("resize",()=>{
        this.doctorSchedule.resize()
      });
    },
    // 日工作量完成统计
    getWorkChartList() {
      this.workSchedule = echarts.init(this.$refs.workSchedule)
      this.workSchedule.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          x:'center',
          y:'bottom',
          padding:[40,0,30,0],
          itemWidth: 10,  // 设置宽度
          itemHeight: 10, // 设置高度
          icon: "circle",
          itemGap: 100 ,// 设置间距
          data: ['新增量表完成数', '应完成累计总量', '实际累计总量']
        },
        grid: {  // top,bottom,left,right等
          bottom: 80,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['2-21', '2-22', '2-23', '2-24', '2-25', '2-26', '2-27'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 1500,
            interval: 250,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '新增量表完成数',
            type: 'bar',
            barWidth : 30,
            itemStyle: {
              normal: {
                color: '#1890FF'
              }
            },
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: [
              600, 500, 1200, 400, 100, 800, 600
            ]
          },
          {
            name: '应完成累计总量',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#4DCB73'
              }
            },
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: [
              600, 500, 1200, 400, 100, 800, 600
            ]
          },
          {
            name: '实际累计总量',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#FF4848'
              }
            },
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: [600, 100, 1200, 400, 100, 800, 1500]
          }
        ]
      })
      window.addEventListener("resize",()=>{
        this.workSchedule.resize()
      });
    }
  },
};
</script>

<style scoped lang="scss">
.home {
  .card-box {
    ::v-deep .el-card__header {
      height: 68px;
      line-height: 42px;
    }
    .el-table::before {
      height: 0;
    }
    .title-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .followSchedule-box {
      background: #F7F7F7;
      padding: 25px 0;
      .followSchedule-content {
        display: -webkit-box;
        display: -ms-flexbox;
        overflow-x: auto;
        padding: 0 0 10px;
        margin: 0 20px;
        li {
          display: flex;
          align-items: center;
          flex-direction: column;
          margin: 0 15px;
          div {
            height: 30px;
          }
          em {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: red;
            margin-right: 8px;
          }
          span {
            font-size: 14px;
            line-height: 30px;
          }
          .spa1 {
            color: rgba(0, 0, 0, 1);
          }
          .spa2 {
            color: rgba(0, 0, 0, 0.42);
          }
        }
      }
    }
    .spa3 {
      display: inline-block;
      font-size: 14px;
      line-height: 22px;
      padding-top: 15px;
      color: rgba(153, 153, 153, 0.64);
    }
  }

}
</style>
